@using viBook.Models
@model Chapter

<div class="form-field">
    <fieldset>
        @Html.LabelFor(model => model.ChapterName)
        @Html.TextBoxFor(model => model.ChapterName, new {@class = "form-text"})
    </fieldset>
    <p id="chapterName_validation"  class="message">
        @Html.ValidationMessageFor(model => model.ChapterName)
    </p>
</div>
<div class="form-field">
    <fieldset>
        @Html.LabelFor(model => model.Content)
        @Html.TextAreaFor(model => model.Content)
    </fieldset>
    <div class="message">
        @Html.ValidationMessageFor(model => model.Content)
    </div>
</div>

<div class="editor-field">
    @Html.HiddenFor(model => model.BookId)
</div>
 @if (@Model.Pages != null && @Model.Pages.Count() > 0)
            {
                <div>
                    <a href="#" data-bind="click: editPage"><span>Edit Pages Number</span></a>
                    <input type="hidden" id="listSortedPageId" name="listSortedPageId"/>
                    
                    <ol class="chapters group">
                        <div style="display: none" id="page-section" data-bind="template: {name:'ListPageTemplate', foreach: pageCollection}">
                        </div>
                    </ol>
                </div>
            }
            
<script id="ListPageTemplate" type="text/html">
    <li class="group" data-bind="attr: {'page-id': id()}">
        <div class="dribbble">
            <div class="dribbble-shot">
                <div class="dribbble-img">
                    <a data-bind="attr: { href: '/Pages/edit/'+ id()}" class="dribbble-link">
                        <div style="text-align: center">
                            <img data-bind="attr: {src: imageSource}" height="150" />                                   
                        </div>
                    </a>
                    
                    
                </div>
                <ul class="tools group">
                    <li >No:<span data-bind="text: chapterNumber"></span></li>
                </ul>
            </div>
            
        </div>
        
    </li>

</script>
<script type="text/javascript">
//    check exist ChapterName
     function Page(id, imageSource, chapterNumber) {
        return {
            id: ko.observable(id),
            imageSource: ko.observable(imageSource),
            chapterNumber: ko.observable(chapterNumber)
        };
    }
    $("#ChapterName").focusout(function () {
     var chaptername = $("#ChapterName").val();
        $.ajax({

                url: '@Url.Action("ExistChapterName", "Chapters")',
                type: 'POST',
                data: ko.toJSON({ chapterName: chaptername, chapterId: @Model.Id ,bookId:@Model.BookId}),
                contentType: 'APPLICATION/JSON',
                success: function(result) {
                  if (!result.Valid) {
                        $("#chapterName_validation").empty().html("<img src='../../Content/images/invalid-mark-20.png'/>" + result.Message);

                    }
                    ;
                    if (result.Valid) {
                        $("#chapterName_validation").empty().html("<img src='../../Content/images/available-mark-20.png'/>Available");
                    }
                    ;
                }
            });
    
    });
    $(document).ready(function() {
        $("#page-section").sortable({
                connectWith: '.connectedSortable',
                forcePlaceholderSize: true,
                stop: function(event, ui) {

                    $("#listSortedPageId").val('');
                    for (var i = 0; i < $('#page-section > .group').length; i++) {
                        $("#listSortedPageId").val($("#listSortedPageId").val() + ";" + $($('#page-section > .group')[i]).attr("page-id"));
                    }

                }
            }).disableSelection();});
            
    var listPages = @CustomHelpers.ListPageToJavaScriptConverter(@Model.Pages.ToList()) ;
    var viewmodel = {
        pageCollection: ko.observableArray(listPages),
        editPage: function() {
            $('#page-section').toggle();
        }
    };
    ko.applyBindings(viewmodel);
    
</script>
